.box{
  height: 300px;
  width: 400px;
  a{
    color: #cccccc;
  }
}

.box2{
  @extend  .box;
}
@mixin comcss{
 width: 100%;
  height: 100%;
}

.box6{
  background: yellowgreen;
  @include comcss;
}
.box6-min{
  background: yellowgreen;
  counter-reset: #ffffff;
  @include comcss;
}

@mixin opsacity($opasity:50){
  opacity:$opasity;
}

.contoion{
  @include opsacity;
}
.contoion2{
  @include  opsacity(30);
}

@mixin  fixcommincss($border:1px solid yellow,$height:300px,$width:500px,$paddind:5px){
  border-bottom: $border;
  height: $height;
  width: $width;
  padding: $paddind;
}

.paddindbox{
  @include fixcommincss(1px dotted #ccc)
}
.paddindbox li{
  @include fixcommincss($paddind:15px);
}

.calertbox{
  font-size: 14px;
  color: #000;
}
.calertbox a{
  text-decoration: none;
  &:hover{
    color: red;
  }
}
.calertbox2{
  @extend  .calertbox;
}
.box2{
  @extend .box;
}

%icon{
  font-family: iconfont;
  font-size: 12px;
  counter-reset: #ffffff;
}

.box3,.box4{
  @extend %icon;
}
$title:"items";

.box-#{$title}{
  font-size:14px;
}